<script>

function openRelCa()
{
	$(".bg_transp").show();
	
	$.post("relatorio/gerar", $("#frm_rel").serialize(), function(html){
		$(".ajax-relatorio").html(html).show();
	});
}

$(function(){
	$('.date').datepicker({
		changeMonth: true,
		changeYear: true
	});

	var dates = $('#date_fim, #date_ini').datepicker({
		defaultDate: "+1w",
		changeMonth: true,
		numberOfMonths: 3
	});

});
</script>
<style>
#frm_rel select{
	padding: 10px;
}
</style>
<div id="relatorio" style="background: #f7f7f7; padding: 10px; padding-bottom: 20px; display: none;" class="ui-corner-all">
	<div style="width: 600px; font-size: 22px; margin: 0 auto;  margin-top: 8px;">
		Relat&oacute;rio
		<a class="ui-corner-all" href="javascript:;" 
		style="font-size: 12px; font-weight: bold; margin-left: 10px; 
		padding: 5px; border: 1px solid gray; background: white; float: right;"
		onclick="$('#menu_adm').fadeIn();$('#relatorio').hide();">Voltar ao Menu</a>
		<hr style="margin-top: 15px;" />
	</div>
	<form id="frm_rel" >
		<table style="font-size: 15px; width: 600px;  margin-top: 10px;" align="center">
			<tr>
				<td>
					<b>Funcion&aacute;rio</b>
				</td>
				<td>
					<b>Tipo Pagamento</b>
				</td>
			</tr>
			<tr>
				<td width="1%">
					<div onclick="options('func');" id="func_titulo"  class="ui-corner-all" style="width: 150px; padding: 10px; border: 1px solid #bececf; background: #fcfcfc; background-image: url('public/images/tablesorter/asc.gif'); background-repeat: no-repeat; background-position: 97%">
						Todos
					</div>
					<div id="func" class="ui-corner-all" style="opacity: 0; width: 170px; display: none; border: 1px solid #bececf; background: #f9f9f9; position: absolute;">
						<?php foreach ($this->func as $k => $v): ?>
						<div onclick="$('#caf01_codd').val('<?php echo $k; ?>'); $('#func_titulo').html('<?php echo $v; ?>'); options('func');" style="padding: 10px 0 10px 10px; border-bottom: 1px dotted #eaeaea;">
							<strong><?php echo $v; ?></strong>
						</div>
						<?php endforeach; ?>
					</div>
					<input type="hidden" name="caf01_cod" id="caf01_codd" />
				</td>
				<td>
					<div onclick="options('tp');" id="tp_titulo"  class="ui-corner-all" style="width: 150px; padding: 10px; border: 1px solid #bececf; background: #fcfcfc; background-image: url('public/images/tablesorter/asc.gif'); background-repeat: no-repeat; background-position: 97%">
						Todos
					</div>
					<div id="tp" class="ui-corner-all" style="opacity: 0; width: 170px; display: none; border: 1px solid #bececf; background: #f9f9f9; position: absolute;">
						<?php foreach ($this->tp as $k => $v): ?>
						<div onclick="$('#caf11_tipo_pagamento').val('<?php echo $k; ?>'); $('#tp_titulo').html('<?php echo $v; ?>'); options('tp');" style="padding: 10px 0 10px 10px; border-bottom: 1px dotted #eaeaea;">
							<strong><?php echo $v; ?></strong>
						</div>
						<?php endforeach; ?>
					</div>
					<input type="hidden" name="caf11_tipo_pagamento" id="caf11_tipo_pagamento" />
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<hr />
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<b>Data</b>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<input type="text" onchange="$('#data_ini').val('');$('#data_fim').val('');" 
					name="data_unica" id="data_unica" class="date ui-corner-all" 
					style="border: 1px solid #bececf; font-size: 14px; padding: 10px; width: 150px; 
					background: #fcfcfc;" />
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<hr />
				</td>
			</tr>
			<tr>
				<td colspan="2">
					<b>Data por Per&iacute;odo</b>
				</td>
			</tr>
			<tr>
				<td colspan="2">
					De <input onchange="$('#data_unica').val('');" type="text" name="data_ini" id="data_ini" class="date ui-corner-all" style="border: 1px solid #bececf; font-size: 14px; padding: 10px; width: 150px; background: #fcfcfc;" value="" />
					At&eacute; <input onchange="$('#data_unica').val('');" type="text" name="data_fim" id="data_fim" class="date ui-corner-all" style="border: 1px solid #bececf; font-size: 14px; padding: 10px; width: 150px; background: #fcfcfc;" value="" />
				</td>
			</tr>
		</table>
		<div style="font-size: 15px; width: 600px; margin: 0 auto; margin-top: 10px;">
		<hr style="margin: 10px 0 15px 0;" />
		
			<div id="salvar_btn" class="button ui-corner-all" onclick="openRelCa();" style="text-align: center; float: left; padding: 20px; width: 42%;">
				<b>Gerar Relat&oacute;rio</b>
			</div>
			<div class="button ui-corner-all" onclick="$('.bt_usuario').click();" style="text-align: center; padding: 20px; margin-left: 51%; width: 42%;">
				<b>Limpar</b>
			</div>
		</div>
	</form>
</div>
<div class="ajax-relatorio"></div>